<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>

<html:html lang="true">
    <head>
        <title>Book My Trip</title>

        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA7j_Q-rshuWkc8HyFI4V2HxQYPm-xtd00hTQOC0OXpAMO40FHAxT29dNBGfxqMPq5zwdeiDSHEPL89A" type="text/javascript"></script>
        <style>
            header { background: black  repeat-x; position: fixed; box-shadow: 4px 6px 3px 8px rgba( 0,0,0,0.4 ); width: 100%; height: 51px; z-index: 100; top:0px; left:0px;-webkit-font-smoothing: subpixel-antialiased; }
        </style>
        <script type="text/javascript">

            var geocoder, location1, location2, gDir;

            function initialize() {
                geocoder = new GClientGeocoder();
                gDir = new GDirections();
                GEvent.addListener(gDir, "load", function() {
                    var drivingDistanceMiles = gDir.getDistance().meters / 1609.344;
                    var drivingDistanceKilometers = gDir.getDistance().meters / 1000;
                    document.getElementById('results').innerHTML ='Total Distance <br>In KM : &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="totalDistance" value="'+drivingDistanceKilometers+'">';
                });
            }

            function showLocation() {
                geocoder.getLocations(document.forms[0].address1.value, function (response) {
                    if (!response || response.Status.code != 200)
                    {
                        alert("Sorry, we were unable to geocode the first address");
                    }
                    else
                    {
                        location1 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
                        geocoder.getLocations(document.forms[0].address2.value, function (response) {
                            if (!response || response.Status.code != 200)
                            {
                                alert("Sorry, we were unable to geocode the second address");
                            }
                            else
                            {
                                location2 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
                                gDir.load('from: ' + location1.address + ' to: ' + location2.address);
                            }
                        });
                    }
                });

                var fromTemp=document.getElementById('from').value;
                var toTemp=document.getElementById('to').value;

                document.getElementById('frame').innerHTML = '<embed src="http://localhost:8084/BookMyDriver/bookMyTrip/FinalGeoCoding.jsp?one='+fromTemp+'&&two='+toTemp+'" style="height:40%; width: 99%;" >';
                var mapDataFinal='http://localhost:8084/BookMyDriver/bookMyTrip/FinalGeoCoding.jsp?one='+fromTemp+'&&two='+toTemp;
                
                document.getElementById('mapData').innerHTML ='<input type="hidden" name="mapData" value="'+mapDataFinal+'" />';
            }

        </script>
        <html:base/>
    </head>
    <body style="background-color: white" onload="initialize()">
    <header class="slide" style="height: 51px;">

        <h2 style="color: orange">
            &nbsp;&nbsp;New Tour :&nbsp;<img src="http://www.iconsdb.com/icons/preview/soylent-red/down-circular-xxl.png" style="width: 30px; height: 30px;"/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Bid List :&nbsp;<img src="http://www.iconsdb.com/icons/preview/soylent-red/down-circular-xxl.png" style="width: 30px; height: 30px;"/>

        </h2>


    </header>
    <table rules="cols" style="height: 100%; width: 100%;">
        <tr>
            <th style="width: 30%; height: 110%;">
                <div align="left" style="background-color: pink; width:100%; height: 100%; ">
                    <br><br> 
                    <html:form action="/BookMyTrip">
                       <p>
                        Customer Id : &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="text" name="customerId" id="customerId" value=""/><br><br>
                        Destination From :&nbsp;<input type="text" name="address1" id="from" value="Mumbai"/><br><br>
                        Destination To : &nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="address2"  id="to" value="Nagpur" />
                        <input type="submit" value="Search" onclick="showLocation(); return false;"/>
                        <br>
                        <div id="results"></div>
                        <img src="https://mts.googleapis.com/vt/icon/name=icons/spotlight/spotlight-waypoint-a.png&text=A&psize=16&font=fonts/Roboto-Regular.ttf&color=ff333333&ax=44&ay=48&scale=1"/>
                        Starting point :
                        <img src="https://mts.googleapis.com/vt/icon/name=icons/spotlight/spotlight-waypoint-b.png&text=B&psize=16&font=fonts/Roboto-Regular.ttf&color=ff333333&ax=44&ay=48&scale=1"/>
                        Ending Point :
                        <div id="frame">
                            <embed src="http://localhost:8084/BookMyDriver/bookMyTrip/FinalGeoCoding.jsp?one=Mumbai&&two=nagpur" style="height: 40%; width: 99%;" >
                        </div>
                        <br>
                        Days Of Trip :&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="days" id="days" value="3"/><br><br>
                        Vehicle Name :&nbsp;&nbsp;&nbsp;<input type="text" name="vehicleName" id="vehicleName" value="Tata Sumo 500"/><br><br>
                        Days Of Trip :&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="vehiclePic" id="vehiclePic" value="Exp"/><br><br>
                        Tour Price : &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;<input type="text" name="tourPrice" id="tourPrice" value="3000"/>
                        <input type="submit"/>
                        </p>


                        <div id="mapData"></div>
                    </html:form>  </div>
            </th>

            <!------------------------------------------List Of All Open Bid------------------------------------------------------------------>


            <th>
                <div align="left" style="background-color: rgba(0, 128, 0, 0.62); width:100%; height: 100%; overflow: scroll;">
                    <br><br>
                   




                </div>
            </th>

             <!------------------------------------------List Of All Open Bid------------------------------------------------------------------>


        </tr>

    </table>
            </body>
        </html:html>
